<!-- 标签栏 -->
<template>
  <div class="bot">
    <van-tabbar v-model="active" active-color="#313131" inactive-color="#999999">
      <van-tabbar-item badge="" v-for="item in TabBar" :key="item.id" :to="item.path">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <img :src="props.active ? item.src : item.srchi" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import tx1 from '../../assets/TabPic/home1.jpg'
import tx1hi from '../../assets/TabPic/home1-hiac.jpg'
import tx2 from '../../assets/TabPic/home2.jpg'
import tx2hi from '../../assets/TabPic/home2-hiac.jpg'
import tx3 from '../../assets/TabPic/home3.jpg'
import tx3hi from '../../assets/TabPic/home3-hiac.jpg'
import tx4 from '../../assets/TabPic/home4.jpg'
import tx4hi from '../../assets/TabPic/home4-hiac.jpg'
export default {
  data() {
    return {
      active: 0,
      TabBar: [
        { id: 1, path: '/', src: tx1, srchi: tx1hi, name: '学烘培' },
        { id: 2, path: '/show', src: tx2, srchi: tx2hi, name: '烘培圈' },
        { id: 3, path: '/questionAndAnswer', src: tx3, srchi: tx3hi, name: '问答' },
        { id: 4, path: '/client', src: tx4, srchi: tx4hi, name: '小窝' },
      ],
    }
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.activeRed {
  color: #999999;
}
.bot::after {
  content: '';
  display: block;
  height: 50px;
  overflow: hidden;
  zoom: -1;
}
::v-deep .van-tabbar-item__icon img {
  display: block;
  width: 25px;
  height: 25px;
}
::v-deep .van-tabbar-item__text{
  font-size: 11px;
}
</style>